<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/commonTaglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单管理页面</title>
<script type="text/javascript">
    $(function(){
    	$('#menuList').tree({
    		url: '${ctx}/menu/getAllMenu.do',
    		checkbox:false,
    		loadFilter: function(rows){
    			if(null!=rows&&null!=rows.children){
    				rows=rows.children;
    			 }
    			return rows;
    		},
           onClick:function(node){
        		$("#name").textbox("readonly",true);
            	$("#path").textbox("readonly",true);
        	    $("#id").textbox("setValue",node.id);
        	    $("#level").textbox("setValue",node.level);
        	    $("#location").textbox("setValue",node.location);
        	    $("#name").textbox("setValue",node.text);
        	    $("#path").textbox("setValue",node.path);
    		},
    	});
    })
    //改变编辑状态
    function changeEdit(type){
    	var id=$("#id").textbox("getValue");
    	if(!id){
    		$.messager.alert('提示','请先选择一个菜单');
    		return;
    	}
    	$("#name").textbox("readonly",false);
    	$("#path").textbox("readonly",false);
    	if(type==0){
    		$("#name").textbox("setValue","");
        	$("#path").textbox("setValue","");
    	}
    }
    //提交
    function save(type){
    	var isreadonly=$("#name").textbox("options").readonly;
    	if(!isreadonly){
    		 $.ajax({
    			url:"${ctx}/menu/addMenu.do",
         	    data:$("#meunDetails").serialize()+"&type="+type,
         	    success:function(){
         	    		if(type==0){
         	    			$.messager.alert('提示',"添加成功！");
         	    		}else if(type==1){
         	    			$.messager.alert('提示',"修改成功！");
         	    		}
         	    		$("#name").textbox("setValue","");
         	        	$("#path").textbox("setValue","");
         	        	$("#name").textbox("readonly",true);
                     	$("#path").textbox("readonly",true);
         	    		$('#menuList').tree('reload');
         	    		parent.document.getElementById('westMenu').src='${ctx}/jump/westMenu';
         	    },
         	    error:function(){
         	    	$.messager.alert('提示','未知错误，请联系管理员!',"error");
         	    } 
    		 })
    	}else{
    		$.messager.alert('提示','不可编辑!');
    	}
    }
    //删除
    function deleteMenus(){
  	  var node = $('#menuList').tree('getSelected');
  	  if(node==null){
  		 $.messager.alert('提示',"请选择一个菜单!"); 
  	  }else{
  		  $.messager.confirm('提示', "你确定要删除<span style='color:'red''>"+node.text+"</span>?", function(r){
				if (r){
					$.ajax({
		    			url:'${ctx}/menu/deleteMenu.do',
		    			data:{id:node.id},
		    			type:'POST',
		    			dataType:'JSON',
		    			success:function(){
		    					$.messager.alert("提示","删除成功！");
		    					$("#name").textbox("setValue","");
		        	        	$("#path").textbox("setValue","");
		        	        	$("#name").textbox("readonly",true);
		                    	$("#path").textbox("readonly",true);
		    					$('#menuList').tree('reload');
		    					parent.document.getElementById('westMenu').src='${ctx}/jump/westMenu';
		    			},
		    			error:function(){
		    				$.messager.alert("提示","未知错误，请联系管理员！","error");
		    			}
		    		})
				}
			}); 
  	  }
    }
</script>
</head>
<body>
        <div class="easyui-layout" style="width:100%;height:100%;">
		<div data-options="region:'west',split:true,title:'菜单列表'" title="West" style="width:20%;">
		     <ul id="menuList" class="easyui-tree">
	         </ul>
		</div>
		<div data-options="region:'center',title:'菜单详情'">
		
		<div class="easyui-panel" style="padding:5px;">
		<a href="#" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-add'">新增</a>
		<a href="#" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-edit'">修改</a>
		<a href="javascript:deleteMenus()"   class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-cancel'">删除</a>
	    </div>
	    <div id="mm1" style="width:150px;">
		<div data-options="iconCls:'icon-edit'" onclick="changeEdit('0')">预新增</div>
		<div data-options="iconCls:'icon-add'"onclick="save('0')">子菜单</div>
		<div data-options="iconCls:'icon-add'" onclick="save('3')">一级菜单</div>
	   </div>
	   <div id="mm2" style="width:100px;">
		<div data-options="iconCls:'icon-edit'" onclick="changeEdit('1')">预修改</div>
		<div data-options="iconCls:'icon-edit'" onclick="save('1')">修改</div>
	    </div>
        <form id="meunDetails" method="post">
        <div style="display:none">
		 <input id="id" class="easyui-textbox" type="text" name="id" />
         </div>
         <div style="display:none">
		 <input id="level" class="easyui-textbox" type="text" name="level" />
         </div>
         <div style="display:none">
		 <input id="location" class="easyui-textbox" type="text" name="location" />
         </div>
         <div>
		 <label for="name">菜单名称:</label>
		 <input id="name" class="easyui-textbox" type="text" name="name" data-options="readonly:'true'" />
         </div>
          <div>
		  <label for="path">路径:</label>
		  <input id="path"class="easyui-textbox" type="text" name="path" data-options="readonly:'true'"/>
          </div>
         </form>
		</div>
	</div>
</body>
</html>